<template>
	<div class="">
		<Modal :value="invite" @on-visible-change="onChangeInvite" :closable="false" footer-hide :z-index="900" :width="395">
			<div class="voice_invite">
				<div class="voice_invite_close">
					<img src="../../../../assets/new/voice_close.png" @click.stop="onChangeInvite(false)">
				</div>
				<div class="voice_invite_user">
					<img src="../../../../assets/new/voice_invite_user.png" >
				</div>
				<div class="voice_invite_detail">
					<div class="voice_invite_detail_title">
						武侯城管1组
					</div>
					<div class="voice_invite_detail_tips">
						邀请你对讲...
					</div>
				</div>
				<div class="voice_invite_btn">
					<img src="../../../../assets/new/voice_invite_not.png" @click="onHangUp">
					<img src="../../../../assets/new/voice_invite_phone.png" @click="onConnect">
				</div>
				<div class="voice_invite_absolute_top"></div>
				<div class="voice_invite_absolute_bottom"></div>
			</div>
		</Modal>
	</div>
</template>

<script>
	export default{
		model: {
			prop: 'invite',
			event: 'onChange'
		},
		props:{
			invite:Boolean,
			voiceReceive:Object,
			trtcCalling:Object
		},
		data(){
			return {
				
			}
		},
		methods:{
			onChangeInvite(boo) {
				if (!boo) {
					this.$emit('onChange', false)
				}
			},
			//挂断
			onHangUp(){
				this.trtcCalling.reject();
				this.onChangeInvite(false);
				this.$parent.voice = true;
				this.$parent.$refs.voice.ConOrHand = false;
			},
			//接通
			onConnect(){
				this.trtcCalling.accept();
				this.onChangeInvite(false);
				this.$parent.voice = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.ivu-modal {
			top: 50%;
			margin-top: -163px;
	
			.ivu-modal-content {
				background-color: rgba(0, 0, 0, 0);
				box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	
				.ivu-modal-body {
					background-color: rgba(0, 0, 0, 0);
					padding: 0;
				}
			}
		}
	
		.ivu-input {
			color: #FFFFFF;
			border: 0px;
			background-color: rgba(0, 0, 0, 0);
		}
	
		.ivu-icon-md-add {
			border: 1px solid #999999;
			border-radius: 50%;
		}
		.ivu-input:hover {
		    border-color: rgba(13,157,255,0);
		}
		.ivu-input:focus {
		    border-color: rgba(13,157,255,.8);
		    outline: 0;
		    box-shadow: 0 0 0 2px rgba(13,157,255,0);
		}
		.ivu-select-dropdown{
			text-align: left;
			background-color: rgba(0,0,0,0);
			background-image: url(../../../../assets/new/voice_search.png);
			background-size: 100% 100%;
		}
		.treeSelect .treeSelect-dropdown{
			background-color: rgba(0,0,0,0);
			padding-top: 4px;
		}
		.ivu-tree-title{
			color: #FFFFFF;
		}
		.ivu-tree-title:hover {
			color: rgba(13,157,255,.8);
		    background-color: #e9f8f5;
		}
		.ivu-tree-title-selected{
			color: rgba(13,157,255,.8);
		}
		.ivu-tree-arrow{
			color: #FFFFFF;
		}
		.icon-gongsi,.icon-jiaose{
			color: rgba(13,157,255,.8) !important;
		}
		.ivu-tree-empty{
			color: #999999;
			text-align: center;
			margin-top: 15px;
		}
	}
	.voice_invite{
		width: 395px;
		height: 266px;
		background-image: url(../../../../assets/new/voice_invite.png);
		background-size: 100% 100%;
		position: relative;
		.voice_invite_close{
			text-align: right;
			img{
				width: 86px;
				height: 50px;
				margin: 2px 3px 0 0;
				cursor: pointer;
			}
		}
		.voice_invite_user{
			text-align: center;
			position: relative;
			z-index: 999;
			img{
				width: 56px;
				height: 56px;
			}
		}
		.voice_invite_detail{
			line-height: 1;
			font-size: 14px;
			color: #FFFFFF;
			text-align: center;
			position: relative;
			z-index: 999;
			.voice_invite_detail_title{
				margin: 20px 0 10px;
			}
			.voice_invite_detail_tips{
				font-size: 12px;
			}
		}
		.voice_invite_btn{
			margin-top: 18px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			z-index: 999;
			img{
				width: 37px;
				height: 37px;
				cursor: pointer;
			}
			img:first-child{
				margin-right: 90px;
			}
		}
		.voice_invite_absolute_top{
			width: 194px;
			height: 53px;
			background-image: url(../../../../assets/new/voice_invite_bgc.png);
			background-size: 100% 100%;
			position: absolute;
			top: 63px;
			left: 100px;
		}
		.voice_invite_absolute_bottom{
			width: 383px;
			height: 93px;
			background-image: url(../../../../assets/new/voice_invite_ani.png);
			background-size: 100% 100%;
			position: absolute;
			bottom: 27px;
			left: 6px;
		}
	}
</style>
